import { useRouter } from "next/router";
import styles from "../styles/Login.module.css";

import React, { useState, useEffect } from "react";
import { Form, Input, Button, message, Row, Col } from "antd";
import Head from "next/head";
import { useSelector, useDispatch } from "react-redux";

const useStore = () => {
  const dispatch = useDispatch();
  const login = (data) => {
    dispatch({
      type: "LOGIN",
      payload: data,
    });
  };

  return { login };
};

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};
const tailLayout = {
  wrapperCol: { offset: 6, span: 14 },
};

// const num = Math.floor(Math.random()*6);

export default function Login(props) {
  const [num, setNum] = useState(null);
  const { login } = useStore();

  const [loading, setLoading] = useState(false);

  // http://192.168.1.169:10089/admin/captcha?width=83&height=43&0.7498706112381079



  const [captchaUrl, setCaptchaUrl] = useState('');

  const refresh = () => {
    setCaptchaUrl(
      "http://192.168.1.169:10089/admin/captcha?width=83&height=43&" +
        Math.random()
    );
  };

  const router = useRouter();

  useEffect(() => {
    let url =
    "http://192.168.1.169:10089/admin/captcha?width=83&height=43&" +
    Math.random();

    setCaptchaUrl(url)

    setNum(Math.floor(Math.random() * 6))
    // Prefetch the dashboard page
    router.prefetch("/index");
  }, []);

  const onFinish = (values) => {
    setLoading(true);
    login(values);

    setTimeout(() => {
      setLoading(false);
      router.push("/");
    }, 2000);
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  return (
    <div
      className={styles.container}
      style={{ backgroundImage: (num?("url(/imgs/login" + num + ".jpg)"):null) }}
    >
      <Head>
        <title>绩效管理信息系统</title>
      </Head>
      <div className={styles.loginForm}>
        {/* <img src="/imgs/login.jpg" alt="登录" /> */}
        <div className={styles.title}>绩效管理信息系统</div>
        <Form
          {...layout}
          name="basic"
          // initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            label="用户名"
            name="name"
            rules={[{ required: true, message: "请输入用户名!" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: "请输入密码!" }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="验证码"
            name="captcha"
            rules={[{ required: true, message: "请输入验证码!" }]}
          >
            <Row gutter={8}>
              <Col span={18}>
                <Input />
              </Col>
              <Col span={6}>
                <img
                  src={captchaUrl}
                  alt="验证码"
                  // class="ml-2 flex-shrink-0 captchaImg"
                  // width="83"
                  height="45"
                  onClick={refresh}
                />
              </Col>
            </Row>
          </Form.Item>

          {/* <Form.Item {...tailLayout} name="remember" valuePropName="checked">
              <Checkbox>记住账号信息</Checkbox>
            </Form.Item> */}

          <Form.Item {...tailLayout}>
            <div style={{ display: "flex" }}>
              <Button
                type="primary"
                htmlType="submit"
                loading={loading}
                style={{ marginRight: "10px", flex: "1" }}
              >
                登录
              </Button>
              <Button
                type="primary"
                style={{ flex: "1" }}
                onClick={() => {
                  message.info("暂未实现");
                }}
              >
                注册
              </Button>
            </div>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
// Login.getInitialProps = async (ctx) => {
//   console.log(ctx);
//   return {}
// };
// export default Login;
